import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Icon from '../Icon/index';
import './index.less';

class CheckBox extends React.Component {
    /**
     * 开关类型，默认CheckBox
     *
     * type: String;
     */
    /**
     * 开关状态，默认选中
     *
     * checked: bool;
     */
    /**
     * 点击开关回调，
     *
     * onChange: () => {};
     */

    static defaultProps = {
        checked: true
    };
    static propTypes = {
        color: PropTypes.string,
        checked: PropTypes.bool,
        onChange: PropTypes.func
    };
    constructor(props) {
        super(props);
        this.state = {
            checked: this.props.checked
        };
    }

    checkedChange = (value, e) => {
        e.preventDefault();
        e.stopPropagation();
        this.props.onChange(!value);
    };

    componentWillReceiveProps({ checked }) {
        this.setState({ checked });
    }

    render() {
        const { checked } = this.state;
        const { color, className, disabled = false } = this.props;
        const disabledCls = classNames({
            'disabled-cls': disabled,
            'checked-box': true
        });
        return (
            <div
                className={disabledCls}
                onClick={!disabled && this.checkedChange.bind(this, checked)}
            >
                {checked ? (
                    <Icon type="xuanzhongduigou" className={className} />
                ) : (
                    <Icon type="unchecked" className={className} />
                )}
            </div>
        );
    }
}

export default CheckBox;
